<html>
	<header>
	
	
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	 
	<script src="https://minedata.cn/minemapapi/v1.3/minemap.js"></script>


   
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
        }

        html, body {
            margin: 0;
            padding: 0;
        }
		
		  *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        #container,#map,#deck-layer{
            height:100%;
        }
        
	
</style>
</header>
<body>
<div id="container">
    <div id="map"></div>
    
</div>
 

<script>
  
 
minemap.accessToken = '449ba822788c46bea9f90dfba48e5269';
minemap.solution = '4013';

var myjson = {}

const map = new minemap.Map({
    container: 'map',
    style: 'http://minedata.cn/service/solu/style/id/4013',
    center: [118.8386378, 37.0313616],
    zoom: 10,
    bearing: 0,
    pitch: 45,
});


map.on('load', function () {
	
	myjson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [116, 39]
            },
            "properties": {
                "title": "Mapbox DC",
                "icon": "monument"
            }
        }, {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [118.8386378, 32.0313616]
            },
            "properties": {
                "title": "Mapbox SF",
                "icon": "harbor"
            }
        }]
    }
	
	console.log("---start---")
	
	for(var i=0;i<350000;i++){
		var lng = 118  + Math.random()
		var lat = 37  + Math.random()
		var feature = {
			"type": "Feature",
			"geometry" : {
				"type" : "Point",
				"coordinates": [lng, lat]
			},
			"properties": {
                "title": "Mapbox SF",
                "icon": "harbor"
            }
		}
		myjson.features.push(feature)
	}
	
	console.log("---over---")

    map.addLayer({
        "id": "points",
        "type": "circle",
        "source": {
            "type": "geojson",
            "data": myjson
        },
        "paint": {
            "circle-radius":4,
            "circle-color":"#ff0000"
        }
    });
});
 
</script>   
</body>
</html>